<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="img/favicon.ico" type="images/x-icon" />
    <title>学生列表</title>
    <style>
        table {
            font-size: 18px;
            margin: 0 auto;
            text-align: center;
            color: slategray;
        }

        table tr:nth-child(2n) {
            background-color: palegreen;
        }

        h3 {
            text-align: center;
            font-size: 30px;
        }

        #header {
            width: 100%;
            height: 40px;
        }

        #header ul li a {
            padding: 0 20px;
            background-color: #ffff80;
            color: #ff8040;
            font: bold 20px KaiTi;
            border: 1px solid;
            border-radius: 5px;
            text-decoration: none;
            font-size: 30px;
        }

        #header ul li {
            list-style-type: none;
            float: left;
            margin-left: 10px;
        }

        #footer ul li a {
            padding: 0 35px;
            font: bold 20px KaiTi;
            background-color: #ffff80;
            color: #ff8040;
            border: 1px solid;
            border-radius: 5px;
            text-decoration: none;
            font-size: 35px;
        }

        #footer ul li {
            float: left;
            list-style-type: none;
            padding-bottom: 20px;
            margin-left: 80px;

        }

        #footer {
            position: fixed;
            top: 750px;
            left: 200px;
        }
    </style>
</head>

<body class="bg">

    <h3>学生信息列表</h3>
    <div id="header">
        <ul>
            <li><a href="javascript:void(0);" id="viewBook">查看</a></li>
            <li><a href="/toAdd" id="addBook">新增</a></li>
            <li><a href="javascript:void(0);" id="deleBook">批量删除</a></li>
        </ul>
    </div>
    <table border="1" width="100%" cellspacing="0" cellpadding="10">
        <tr>
            <th>选择</th>
            <th>学生编号</th>
            <th>学生名称</th>
            <th>学生年龄</th>
            <th>学生性别</th>
            <th>手机号码</th>
            <th>家庭地址</th>
            <th colspan="3">操作</th>
        </tr>
        <% stus.forEach((stu)=>{ %>
            <tr>
                <td><input type="checkbox" value="<%=stu.stuid%>"/></td>
                <td><%=stu.stuid%></td>
                <td><%=stu.stuname%></td>
                <td><%=stu.stuage%></td>
                <td><%=stu.stusex%></td>
                <td><%=stu.mobile%></td>
                <td><%=stu.address%></td>
                <td><a href="/delById?id=<%=stu.stuid%>">删除</a></td>
                <td><a href="/toEdit?id=<%=stu.stuid%>">修改</a></td>
                <td><a href="/findById?id=<%=stu.stuid%>">查看</a></td>
            </tr>
        <%}) %>
    </table>

    <div id="footer">
        <ul>
            <li><a href="javascript:void(0);">首页</a></li>
            <li><a href="javascript:void(0);">上一页</a></li>
            <li><a href="javascript:void(0);">下一页</a></li>
            <li><a href="javascript:void(0);">末页</a></li>
        </ul>
    </div>
</body>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<script>
    var viewBook = document.getElementById("viewBook"); //查看
    viewBook.onclick = function () {
        // 获取选中的图书编号
        let checkboxs = $("input[type='checkbox']:checked");
        if(checkboxs.length==1){
            window.location.href = "/findById?id="+checkboxs.val();
        }else{
            alert("请选择一条数据");
        }
    }


    // 批量删除
    var deleBook = document.getElementById("deleBook"); 
    deleBook.onclick = function () {
        // 获取选中的图书编号
        let checkboxs = $("input[type='checkbox']:checked");
        let ids=[];
        if(checkboxs.length>0){
            for(let i=0;i<checkboxs.length;i++){
               ids.push(checkboxs[i].value);
            }
            console.log(ids)
            window.location.href = "/delByIds?ids="+ids;
        }else{
            alert("请选择一条数据");
        }
    }
</script>

</html>